<script setup>
import QRCode from "qrcode";
import { onBeforeMount, onUnmounted, ref } from "vue";
import { getUserInfo } from "@/api/user";
import { useRouter } from "vue-router";
import { useUserStoreHook } from "@/store/modules/user";
import iconifyIconOffline from "../ReIcon/src/iconifyIconOffline";
import { initRouter, getTopMenu } from "@/router/utils";

import { setToken, getToken } from "@/utils/auth";
import {
  getOrderNo,
  getOrderDetail,
  createOrder,
  getOrderProduct
} from "@/api/order";
import { useIntervalFn } from "@vueuse/core";

import information from "@iconify-icons/ri/information-line";

defineOptions({
  name: "MemberDialog"
});
const router = useRouter();
const productlist = ref([]);
const date = ref(Date.now() + 1 * 60 * 1000);
let codeImg = ref("");
let useInterval = null;
let orderInfo = ref({
  orderNo: "",
  orderSource: "web",
  orderType: "VIP",
  payAmount: 1,
  vipTypeId: 1,
  vipTypeName: "年会员"
});

let isreset = ref(false);
let defaultProduct = ref([]);
// 切换会员产品
const handleClickProdect = item => {
  defaultProduct.value = item;
};
// 倒计时结束
const handleFinish = () => {
  console.log("倒计时结束");

  isreset.value = false;
  date.value = Date.now() + 2 * 60 * 1000;
  handleGetOrderNo();
};
// 获取订单号
const handleGetOrderNo = async () => {
  let { data } = await getOrderNo({ orderType: "VIP" });
  createOrder({
    orderNo: data,
    orderSource: "web",
    orderType: "VIP",
    payAmount: 1,
    vipTypeId: defaultProduct.value.id,
    vipTypeName: defaultProduct.value.vipName
  }).then(res => {
    if (res.success) {
      orderInfo.value = res.data.order;
      QRCode.toDataURL(res.data.payCodeUrl, function (err, url) {
        codeImg.value = url;
      });
      useInterval = useIntervalFn(handleGetPayStatus, 3000, {
        immediate: true
      });
    }
  });
};

// 获取会员产品
const handleGetvipProduct = async () => {
  return await getOrderProduct();
};
//查询支付状态
const handleGetPayStatus = () => {
  getOrderDetail({
    orderNo: orderInfo.value.orderNo
  }).then(res => {
    if (res.success && res.data.payStatus == "PAYED") {
      useInterval.pause(); // 成功后停止轮询
      // 获取后端路由
      handleRefreshUser();
    }
  });
};

const handleRefreshUser = () => {
  initRouter().then(() => {
    getUserInfo().then(res => {
      if (res.code == 20000) {
        useUserStoreHook().SET_VIPNAME(res.data.vipName);
        useUserStoreHook().SET_VIPENDTIME(res.data.vipEndTime);
        useUserStoreHook().SET_VIPSTARTTIME(res.data.vipStartTime);
        useUserStoreHook().SET_QUANTITUY(res.data.quantity);
        useUserStoreHook().SET_QUANTITYUSED(res.data.quantityUsed);
        useUserStoreHook().SET_ROLES(res.data.roles);
        router.push(getTopMenu(true).path);
        //刷新页面
        location.reload();
      }
    });
  });
};
onBeforeMount(() => {
  handleGetvipProduct().then(res => {
    productlist.value = res.data;
    defaultProduct.value = res.data[0];
    handleGetOrderNo();
  });
});
//卸载页面时关闭定时任务
onUnmounted(() => {
  useInterval.pause();
});
</script>

<template>
  <div>
    <!-- <div class="userinfo">
      <img :size="44" :src="useUserStoreHook()?.avatar" />
      <span class="ml-2">{{ useUserStoreHook()?.nickname }}</span>
    </div> -->
    <div class="pay">
      <div class="pay-title">升级享全部会员权益</div>
      <div class="pay-choic">
        <div
          v-for="(item, index) in productlist"
          :key="index"
          class="pay-choic-item"
          :class="{ active: item.vipName == defaultProduct.vipName }"
          @click="handleClickProdect(item)"
        >
          <span class="name">{{ item.vipName }}</span>
          <span class="price">¥{{ item.vipSellPriceShow }}</span>
          <span class="price-old">¥{{ item.vipBidPriceShow }}</span>
        </div>
      </div>
      <div class="pay-bottom">
        <div class="pay-bottom-code">
          <img :src="codeImg" />
          <div v-show="isreset" class="fail">
            <div class="text">二维码已过期</div>
            <div class="btn" @click="handleFinish">刷新</div>
          </div>
        </div>
        <div class="pay-bottom-detail">
          <div class="paynum">
            <span>{{ defaultProduct.vipSellPriceShow }}</span>
            <span class="tip">
              <iconifyIconOffline :icon="information" class="mr-1" />
              已优惠¥{{ defaultProduct.discountPriceShow }}</span
            >
          </div>
          <div class="time">
            <iconifyIconOffline :icon="information" class="mr-1" />
            <span> 支付时间剩余</span>
            <el-countdown
              value-style="color: #eb5555;font-size: 13px; display:flex; align-items:center;"
              :value="date"
              @finish="
                () => {
                  isreset = true;
                  useInterval.pause();
                }
              "
            />
          </div>
          <div class="text">
            支付表示您已阅读并同意
            <span>《服务条款》</span>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="bottom-equity-bg">
      Copyright © 2024-present DepTags 沪ICP备2024064542号-1
    </div> -->
  </div>
</template>

<style lang="scss" scoped>
.userinfo {
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  height: 107px;
  padding: 0 20px 33px;
  color: #fff;
  background-image: url("@/assets/buybg.png");
  background-size: 100% 100%;

  img {
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    border: 1px solid #a4c8ff;
    border-radius: 50%;
  }

  span {
    margin-right: 6px;
    margin-left: 10px;
    font-size: 15px;
    font-weight: 500;
  }
}

.pay {
  padding: 24px 32px;

  .pay-title {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    font-size: 18px;
    font-weight: 450;
    color: #212930;
  }

  .pay-choic {
    display: flex;
    flex: 0 1 auto;
    flex-direction: row;
    height: 136px;
    margin-bottom: 24px;

    .pay-choic-item {
      position: relative;
      flex-shrink: 1;
      width: 30%;
      height: 140px;
      margin-right: 24px;
      color: #212930;
      text-align: center;
      cursor: pointer;
      border: 1px solid #e9edf2;
      border-radius: 6px;

      .name {
        display: block;
        margin: 16px 0 12px;
        font-size: 16px;
        font-weight: 500;
      }

      .price {
        display: flex;
        align-items: baseline;
        justify-content: center;
        margin-right: 8px;
        font-size: 24px;
        font-weight: 500;
        color: #212930;
      }

      .price-old {
        margin-top: 17px;
        color: #9aa5b8;
        text-decoration: line-through;
      }
    }
  }

  .pay-bottom {
    position: relative;
    display: flex;
    margin-top: 16px;

    .pay-bottom-code {
      position: relative;
      width: 124px;
      height: 124px;
      margin-top: 20px;
      background-color: #f1f1f1;
      box-shadow: 1px 3px 14px #ebebed;

      .fail {
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 124px;
        height: 124px;
        font-size: 13px;
        background: hsl(0deg 0% 100% / 95%);

        .text {
          color: #212930;
        }

        .btn {
          color: #067bef;
          cursor: pointer;
        }
      }
    }

    .pay-bottom-detail {
      margin: 2px 0 0 18px;

      .paynum {
        display: flex;
        align-items: center;
        margin-top: 40px;

        span {
          font-size: 30px;
          font-weight: 600;
          color: #212930;
        }

        .tip {
          position: relative;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          height: 20px;
          padding: 0 8px;
          margin-left: 4px;
          font-size: 13px;
          line-height: 20px;
          color: #fff;
          background: linear-gradient(148.4deg, #ff3f5d, #ff7087);
          border-radius: 10px;
        }
      }

      .time {
        display: flex;
        align-items: center;
        margin-top: 2px;
        font-size: 12px;
        color: #eb5555;

        span {
          margin-right: 5px;
        }
      }

      .text {
        margin-top: 18px;
        font-size: 12px;
        color: #9aa5b8;

        span {
          font-size: 12px;
          color: #212930;
          cursor: pointer;
        }
      }
    }
  }

  .active {
    background: rgb(6 123 239 / 5%);
    border: 1px solid #067bef;
    box-shadow: 0 0 0 1px #067bef;
  }
}

.bottom-equity-bg {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 35px;
  font-size: 12px;
  color: #6c7d8f;
  background: #f3f5f9;
}
</style>
